<script setup lang="ts">
import { getStockBiz } from "@/api/stock/condition";
import { ImageViewer } from "@/components/common/ImageViewer";
import { cloneDeep } from "@pureadmin/utils";
import dayjs from "dayjs";
import { onMounted, ref } from "vue";
import { useColumns } from "./columns";
const { ywdjSdColumns } = useColumns();
const childColumns = cloneDeep(ywdjSdColumns).slice(1);
const props = defineProps({
  optType: {
    type: Number,
    default: 0
  },
  bizCode: {
    type: String,
    default: ""
  }
});

const form = ref<any>({});
const loadDetail = async () => {
  let params = {
    optType: props.optType,
    optCode: props.bizCode
  };
  let { data } = await getStockBiz(params);
  form.value = data || {};
};

const iconHide = ({ row }) => {
  if (row.specList.length == 0 || row.specList.length == 1) {
    return "icon-no";
  }
};

// 合计行
const getSummaries = param => {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if ([3, 4, 5].includes(index)) {
      // 计算金额
      let sumVal = data
        .map(item => Number(item[column.property] || 0))
        .reduce((prev, curr) => prev + curr, 0);
      sums[index] = sumVal;
    }
  });

  return sums;
};

onMounted(() => {
  loadDetail();
});
</script>

<template>
  <div class="goods-table">
    <el-form ref="formRef" :model="form" class="mb-3">
      <div class="flex">
        <el-form-item label="业务类型" prop="goodsCode" class="flex-1">
          <div>{{ form.bizType || "--" }}</div>
        </el-form-item>
        <el-form-item label="业务日期" prop="goodsCode" class="flex-1">
          <div>
            {{
              form.bizTime
                ? dayjs(form.bizTime).format("YYYY-MM-DD HH:mm")
                : "--"
            }}
          </div>
        </el-form-item>
        <el-form-item label="业务单据编号" prop="goodsCode" class="flex-1">
          <div>{{ form.bizCode || "--" }}</div>
        </el-form-item>
      </div>
      <div class="flex">
        <el-form-item
          label="出货仓库"
          prop="goodsCode"
          class="flex-1 items-start"
        >
          <div>{{ form.deliveryDepositoryName || "--" }}</div>
        </el-form-item>
        <el-form-item
          label="收货仓库"
          prop="goodsCode"
          class="flex-1 items-start"
        >
          <div>{{ form.receiveDepositoryName || "--" }}</div>
        </el-form-item>
        <div class="flex-1" />
      </div>
    </el-form>
    <pure-table
      row-key="id"
      align-whole="center"
      :header-cell-style="{
        background: 'var(--el-fill-color-light)',
        color: 'var(--el-text-color-primary)'
      }"
      show-summary
      :summary-method="getSummaries"
      max-height="500"
      :data="form.orderDetails"
      :columns="ywdjSdColumns"
      :row-class-name="iconHide"
    >
      <template #expand="{ row }">
        <div class="ml-[30px]">
          <!-- ==================================== 子表格 =========================== -->
          <pure-table
            row-key="id"
            class="bd-hide"
            align-whole="center"
            :data="row.specList"
            :columns="childColumns"
            :show-header="false"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
          >
            <!-- 商品名称 -->
            <template #goodsName="{ row }">
              <div class="flex items-center">
                <ImageViewer
                  radius="8px"
                  :src="row.specImageJson || row.imageJson"
                />
                <div class="ml-2 break-all">
                  {{ row.specName }}
                </div>
              </div>
            </template>
            <!-- 规格条码 -->
            <template #specName="{ row }">
              <div>{{ row.specCode }}</div>
            </template>
          </pure-table>
        </div>
      </template>
      <!-- 商品名称 -->
      <template #goodsName="{ row }">
        <div class="flex items-center">
          <ImageViewer radius="8px" :src="row.imageJson || row.specImageJson" />
          <div class="ml-2 break-all">
            {{
              row.specList.length > 1
                ? row.goodsName
                : row.specName
                  ? row.goodsName + " (" + row.specName + ")"
                  : row.goodsName
            }}
          </div>
        </div>
      </template>
      <!-- 规格条码 -->
      <template #specName="{ row }">
        <div v-if="row.specList.length > 1">{{ row.goodsCode }}</div>
        <div v-else>
          <div>{{ row.goodsCode }}</div>
          <div>{{ row.specCode }}</div>
        </div>
      </template>
    </pure-table>
  </div>
</template>
<style lang="scss" scoped>
.goods-table {
  margin: 0 30px 30px 30px;
}

.goods-table .el-form-item {
  margin-bottom: 8px;
}

:deep(.icon-no .el-table__expand-icon) {
  display: none;
}
</style>
